class Playground {
    constructor(root) {
        this.root = root;
        this.$playground = $(`
            <div class="my_game_playground"></div>
        `)

        this.hide();
        this.root.$my_game.append(this.$playground);
        this.start();
    }

    get_random_color() {
        let colors = ["blue", "pink", "yellow", "grey", "red", "green"];
        return colors[Math.floor(Math.random() * colors.length)];
    }

    start() {
        let outer = this
        $(window).resize(function () {
            outer.resize()
        })
    }

    resize() {
        console.log("resize")
        this.width = this.$playground.width()
        this.height = this.$playground.height()

        let unit = Math.min(this.width / 16, this.height / 9)
        this.width = unit * 16
        this.height = unit * 9
        this.scale = this.height
        if (this.gameMap) {
            this.gameMap.resize()
        }
    }


    show() {
        this.$playground.show()

        this.resize()

        this.width = this.$playground.width();
        this.height = this.$playground.height();
        this.gameMap = new GameMap(this);
        this.players = [];
        this.players.push(new Player(this, (this.width / 2) / this.scale, 0.5, 0.05, "white", 1, true));

        for (let i = 0; i < 5; i++) {
            this.players.push(new Player(this, this.width * Math.random() / this.scale, this.height * Math.random() / this.scale, 0.05, this.get_random_color(), 1, false))
        }
    }

    hide() {
        this.$playground.hide();
    }
}